// 一般来说封装一个函数

function getNewList() {
  axios({
    url: 'http://www.liulongbin.top:3009/api/news',
  }).then(({ data }) => {
    //要通过then来返回结果
    // axios默认加了一层
    // 接口认为code为200时成功
    // 这里的成功有两种  第一种是技术上的也就是then返回成功了，还有一种是业务上的也就是code的只为200
    if (data.code === 200) {
      // 此时认为获取得到了数据，更加严谨一点
      // 遍历获取到的数据
      // 通过map遍历
      const arr = data.data.map(function (item) {
        return ` <div class="news-item">
      <img class="thumb" src="http://www.liulongbin.top:3009${item.img}" alt="" />
      <div class="right-box">
        <!-- 新闻标题 -->
        <h1 class="title">${item.title}</h1>
        <div class="footer">
          <div>
            <!-- 新闻来源 -->
            <span>胡润百富</span>&nbsp;&nbsp;
            <!-- 发布日期 -->
            <span>${item.item}</span>
          </div>
          <!-- 评论数量 -->
          <span>评论数：${item.cmtcount}</span>
        </div>
      </div>
    </div>`;
      });
      // 通过JQ获取结构然后改数据
      $('#news-list').html(arr);
    }
  });
}
getNewList();

// 总结：如果想要从后端获取数据并且将数据渲染到页面上的步骤
// 1.通过axios方法通过向后端传递参数，例如想要的数据的地址从后端获取想要的数据
// 2.数据拿到后需要返回，这样才是拿到客户端了，用then来返回成功的值
// 3.成功有两个第一个是成功的拿到的数据，第二个更深层的成功是拿到了准确的数据，通过code的值来进行判断
// 4.数据完全获取成功了，就需要将这些数据渲染至页面上
// 4.1获取的数据是套了一层壳子的，我们需要的是这层壳子里面的东西，所以需要对这层数据进行解构，拿到我们想要的即可(知识点，解构)，解构可以在第三步的时候做，直接在返回值的时候就进行解构，这样我们得到的数据就是解构后的
// 4.2遍历获取的数据里面的数据，返回一个我们页面上的结构，并且对结构里面的值修改成活的数据
// 5.此时我们已经把数据已经解构完全准备好了，现在只需要将这些放到页面的对应的位置即可
// 5.1通过jQ获取页面上的结构，然后进行赋值即可
